<template>
	<div style="position: relative;">
		<video draggable="false"
			class="video-js"
			:muted="true"
			style="background:#000000; width: 100%; height: 100%;"
			:autoplay="autoplay"
			:loop="loop"
			:ref="playerId"
			:id="playerId"
			@ended="palyEnd"
			@error="palyError"
			>
			<source draggable="false" :src="src" type='video/mp4'>
		</video>
		<div class="uni-absolute" style="top: 0; left: 0; width: 100%; height: 100%;" @click="videoClick">
		</div>
	</div>
</template>

<script>
  import videojs from 'video.js'
  import "video.js/dist/video-js.min.css"
  export default {
    name: 'AdVideo',
    props: {
      // 轮播间隔时间
      src: {
        type: String,
        default: ""
      },
      isPlay: {
        type: Boolean,
        default: false
      },
      autoplay: {
        type: Boolean,
        default: false
      },
      loop: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        player: null,
        playerId: '',
        videoError: false
      }
    },
    beforeDestroy() {
			// console.log("视频播放器销毁:"+this.playerId+":start")
      if(this.player) {
        this.player.dispose()
        this.player = null
      }
    },
    mounted() {
      this.playerId = 'adVideo_' + Math.random().toString(36).substr(2)
      this.$nextTick(()=>{
        console.log(this.playerId)
        this.player = videojs(this.playerId);
        if(this.isPlay) {
          // console.log("playerId:"+this.playerId+":start")
          this.player.play()
        }
      })
    },
		activated() {
			if(this.autoplay && this.player) {
				this.player.play()
			}
		},
		deactivated() {
			if(this.autoplay&& this.player) {
				this.player.pause()
			}
		},
    watch: {
      isPlay (val) {
        if(val) {
          if(this.videoError) {
            setTimeout(()=>{
              this.palyEnd()
            }, 2000)
          } else {
            this.player.play()
          }
        } else {
          this.player.pause()
        }
      }
    },
    methods: {
      palyEnd() {
        this.$emit("palyEnd")
      },
      palyError() {
        this.videoError = true
        this.$emit("palyEnd")
      },
			videoClick(){
				this.$emit("videoClick")
			}
    }
  };
</script>

<style>
</style>
